<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>


    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Spotlight example</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/carousel/assets/skins/sam/carousel.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/element/element-min.js"></script>
<script type="text/javascript" src="../../build/carousel/carousel-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">
    #container {
        margin: 0 auto;
    }

    /* Style the spotlight container */
    #spotlight {
        border: 1px solid #ccc;
        height: 180px;
        margin: 10px auto;
        padding: 1px;
        width: 240px;
    }

    /* Always be sure to give your carousel items a width and a height */
    .yui-carousel-element li {
        height: 75px;
        opacity: 0.6;
        width: 75px;
        opacity: 0.6;
    }

    .yui-carousel-element .yui-carousel-item-selected {
        opacity: 1;
    }
</style>

<!--end custom header content for this example-->

</head>

<body class="yui-skin-sam">


<h1>Spotlight example</h1>

<div class="exampleIntro">
	<p>
    This example uses the <a href="http://developer.yahoo.com/yui/carousel/">YUI Carousel Control</a> to showcase a simple spotlight
    example using its <code>itemSelected</code> event.  In this example, you can use arrow
    keys to select items as well as click on an item to select it.
</p>
<p>
    Though this functionality looks a little complicated, it is very easy to
    implement.  This is because the YUI Carousel Control handles the keyboard
    event and the mouse click event for setting the selection.  When an item is
    selected, the YUI Carousel Control triggers an <code>itemSelected</code> event.  This
    example subscribes to the <code>itemSelected</code> event to display the selected
    image in the spotlight.
</p>
			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<!-- The Carousel container -->
<div id="container">
    <ol id="carousel">
        <li>
            <img src="http://farm1.static.flickr.com/135/342099636_7b05b7cde5_s.jpg">
        </li>
        <li>
            <img src="http://farm1.static.flickr.com/136/342099938_fdef3ca3b5_s.jpg">
        </li>
        <li>
            <img src="http://farm1.static.flickr.com/147/342099522_3827eaa929_s.jpg">
        </li>
        <li>
            <img src="http://farm1.static.flickr.com/143/342100011_ec4d338c71_s.jpg">
        </li>
        <li>
            <img src="http://farm1.static.flickr.com/161/342100080_0fe4f9ccb0_s.jpg">
        </li>
        <li>
            <img src="http://farm1.static.flickr.com/153/342100324_82589c0ebe_s.jpg">
        </li>
        <li>
            <img src="http://farm1.static.flickr.com/147/342100376_d0336252a7_s.jpg">
        </li>
        <li>
            <img src="http://farm1.static.flickr.com/156/342100472_b9bc985fa4_s.jpg">
        </li>
        <li>
            <img src="http://farm1.static.flickr.com/133/342100566_39dae4698f_s.jpg">
        </li>
    </ol>
</div>
<!-- The spotlight container -->
<div id="spotlight"></div>
<script>
    (function () {
        // Get the image link from within its (parent) container.
        function getImage(parent) {
            var el = parent.firstChild;
                    
            while (el) { // walk through till as long as there's an element
                if (el.nodeName.toUpperCase() == "IMG") { // found an image
                    // flickr uses "_s" suffix for small, and "_m" for big
                    // images respectively
                    return el.src.replace(/_s\.jpg$/, "_m.jpg");
                }
                el = el.nextSibling;
            }
            
            return "";
        }
                
        YAHOO.util.Event.onDOMReady(function (ev) {
            var spotlight   = YAHOO.util.Dom.get("spotlight"),
                carousel    = new YAHOO.widget.Carousel("container");
                       
            carousel.on("itemSelected", function (index) {
                // item has the reference to the Carousel's item
                var item = carousel.getElementForItem(index);

                if (item) {
                    spotlight.innerHTML = "<img src=\""+getImage(item)+"\">";
                }
            });
                
            carousel.render(); // get ready for rendering the widget
            carousel.show();   // display the widget
        });
    })();
</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
